<template>
	<div ref="rank" class="rank">
		<scroll ref="toplist" :data="topList" class="toplist">
			<ul>
				<li v-for="item in topList" :key="item.id" class="item" @click="seletItem(item)">
					<div class="icon">
						<img v-lazy="item.pic" width="100" height="100" alt="icon" />
					</div>
					<ul class="songlist">
						<li v-for="(song, index) in item.songList" :key="index" class="song">
							<span>{{index + 1}}</span>
							<span>{{song.songName}}--{{song.singerName}}</span>
						</li>
					</ul>
				</li>
			</ul>
			<div class="loading-container" v-show="!topList.length">
				<loading></loading>
			</div>
		</scroll>
		<keep-alive>
			<router-view></router-view>
		</keep-alive>
	</div>
</template>

<script>
	import Scroll from '@/base/scroll/scroll';
	import Loading from '@/base/loading/loading';
	import { getTopList } from '@/service/rank';
	import { playlistMixin } from '@/common/js/mixin';
	import { mapMutations } from 'vuex';

	export default {
		name: 'Rank',
		mixins: [playlistMixin],
		data() {
			return {
				topList: []
			}
		},
		async created() {
			const result = await getTopList();
			this.topList = result.topList;
		},
		methods: {
			handlePlaylist(playlist) {
				const bottom = playlist.length ? '60px' : '';
				this.$refs.rank.style.bottom = bottom;
				this.$refs.toplist.refresh();
			},
			seletItem(item) {
				this.$router.push(`/rank/${item.id}`);
				this.setTopList(item);
			},
			...mapMutations({
				setTopList: 'SET_TOP_LIST'
			})
		},
		components: {
			Scroll,
			Loading
		}
	}
</script>

<style lang="stylus" scoped>
	@import "../../common/stylus/variable"
	@import "../../common/stylus/mixin"

	.rank
		position: fixed
		width: 100%
		top: 88px
		bottom: 0
		.toplist
			height: 100%
			overflow: hidden
			.item
				display: flex
				margin: 0 20px
				padding-top: 20px
				height: 100px
				&:last-child
					padding-bottom: 20px
				.icon
					flex: 0 0 100px
					width: 100px
					height: 100px
				.songlist
					flex: 1
					display: flex
					flex-direction: column
					justify-content: center
					padding: 0 20px
					height: 100px
					overflow: hidden
					background: $color-highlight-background
					color: $color-text-d
					font-size: $font-size-small
					.song
						no-wrap()
						line-height: 26px
			.loading-container
				position: absolute
				width: 100%
				top: 50%
				transform: translateY(-50%)
</style>